<template>
	<header>
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<div class="navbar-brand display-4">家庭财务管理系统</div>
			<div class="callapse navbar-collapse">
				<ul class="navbar-nav me-auto">
					<li class="nav-item">
						<a class="nav-link active" href="#" @click="component_name = 'home'">主页</a>
					</li>
					<li class="nav-item dropdown">
						<a
							class="nav-link dropdown-toggle text-black"
							href="#"
							id="userDropDown"
							role="button"
							aria-expanded="false"
							data-bs-toggle="dropdown"
						>用户</a>
						<ul class="dropdown-menu" aria-labelledby="userDropDown">
							<li>
								<a class="dropdown-item" href="#" @click="component_name = 'userProfile'">查看个人信息</a>
							</li>
							<li>
								<a class="dropdown-item" href="#" @click="logout">登出</a>
							</li>
						</ul>
					</li>
					<li class="nav-item dropdown">
						<a
							class="nav-link dropdown-toggle text-black"
							href="#"
							id="billDropDown"
							role="button"
							aria-expanded="false"
							data-bs-toggle="dropdown"
						>账单</a>
						<ul class="dropdown-menu" aria-labelledby="billDropDown">
							<li>
								<a class="dropdown-item" href="#" @click="component_name = 'allBills'">查看全部账单</a>
							</li>
							<li>
								<a class="dropdown-item" href="#" @click="component_name = 'addBill'">增加条目</a>
							</li>
						</ul>
					</li>
					<li class="nav-item dropdown">
						<a
							class="nav-link dropdown-toggle text-black"
							href="#"
							id="financeDropDown"
							role="button"
							aria-expanded="false"
							data-bs-toggle="dropdown"
						>证券管理</a>
						<ul class="dropdown-menu" aria-labelledby="financeDropDown">
							<li>
								<a class="dropdown-item" href="#" @click="component_name = 'allSecurity'">证券查看</a>
							</li>
							<li>
								<a class="dropdown-item" href="#" @click="component_name = 'addSecurity'">证券添加</a>
							</li>
						</ul>
					</li>
					<li class="nav-item">
						<a class="nav-link active" href="#" @click="component_name = 'about'">关于</a>
					</li>
				</ul>
			</div>
		</nav>
	</header>
	<div class="container-fluid login-container2">
		<main class="align-items-center login row">
			<div class="container align-items-center col-9">
				<component :is="currentTabComponent" @switch-to="switchTo($event)"></component>
			</div>
		</main>
	</div>
</template>

<script>
import useStore from "./stores/user"
export default {
	setup() {
		var store = useStore()
		return { store }
	},
	data() {
		return {
			component_name: "home"
		}
	},
	computed: {
		currentTabComponent: function () {
			return this.component_name;
		}
	},
	methods: {
		switchTo(com) {
			this.component_name = com
		},
		logout() {
			this.store.logout()
			this.$router.push("/login")
		}
	},
	mounted() {
		if (!this.store.username) {
			this.$router.push("/login")
		}
	}
}
</script>
